<template>
	<view class="crm">

		<view v-if="list1.length" class="list" :style="{'padding-top': paddingTop}">
			<view class="item" v-for="(item,index) in list1" @click="godetail(item)">
				<view class="tops">
					<view class="left">
						<view class="leftBox">
							<view class="photo">
								<image :src="item.portrait" mode=""></image>
								<view class="sex">
									<image v-if="item.gender=='FEMALE'"
										src="https://mk001.oss-cn-hangzhou.aliyuncs.com/222/girl.png" mode=""></image>
									<image v-else src="https://mk001.oss-cn-hangzhou.aliyuncs.com/222/boy.png" mode="">
									</image>

								</view>
							</view>

							<view class="names">
								<view class="name">
									<view class="fullname">{{item.nickName}}</view>
									
								</view>
								<view class="code">
									{{item.attributes}}

								</view>
							</view>
						</view>

						<view v-if="item.id" class="btns">
							<view @click.stop="look(item)" class="kaitong">
								查看
							</view>
						</view>
					</view>

				</view>

			</view>
			<uni-load-more :status="status"></uni-load-more>
		</view>
		<view v-else class="empty" style="padding-top: 150px;">
			<view v-if="!list1.length && senDate" class="emptyAddress-box">
				<u-empty text="暂无内容" mode="news"></u-empty>
			</view>
		</view>


	</view>
</template>

<script>

	export default {
		
		data() {
			return {
				
				total: null, //总共多少条数据
				formData: {
					pageSize: 10, //每页10条数据
					page: 1, //第几页
				},
				miniUserId: '',
				status: "more",
				senDate: false,
				list1: [],
				paddingTop: ''
			}
		},
		onLoad(e) {
			this.miniUserId = e?.miniUserId
			this.getlist()
			console.log('我是6个对象',e);
			
		},
		onReachBottom() {
			let allTotal = this.formData.page * this.formData.pageSize;
			if (allTotal < this.total) {
				//当前条数小于总条数 则增加请求页数
				this.status = "loading"; //加载中状态
				this.formData.page++;
				this.getlist();
			} else {
				this.status = "noMore"; //加载完状态
				console.log("已加载全部数据");
			}
		},
		onPullDownRefresh() {
			this.formData.page = 1;
			this.getlist('fresh');
		},
		methods: {
			// 查看详情
			look(item) {
				if(item.id){
					uni.navigateTo({
						url: `/pages/sys/app/detail?id=${item.id}&miniUserId=${this.miniUserId}`
					})
				}
			},
			getlist(type) {
				this.senDate = false;
				let query = {
					pageIndex: this.formData.page,
					pageSize: this.formData.pageSize,
					miniUserId: this.miniUserId,
				}
				this.$u.api
					.shareMemberPage(query)
					.then((res) => {
						if(type=='fresh'){
							this.list1 = [];
						}
						this.senDate = true;
						if (res.code == 'ok') {
							this.total = res.data.entityCount;
							const newlist = res.data.entities;
							this.list1.push(...newlist);
							if (this.list1.length < this.formData.pageSize) {
								this.status = "noMore"; //加载完状态
							}
						}
						uni.stopPullDownRefresh()
						uni.hideLoading();
					});
			}
		}
	}
</script>
<style scoped lang="scss">
	.crm {
		padding: 0 0 24rpx;
		.toAppBox {
			margin: 0 auto;
			width: 670rpx;
			background: #FFFFFF;
		}
		.tops1 {
			background: #FFFFFF;
			padding: 0 32rpx 0;
			position: fixed;
			left: 0;
			top: 0;
			right: 0;
			z-index: 9;
		}
		.list {
			margin-top: -24rpx;
			padding: 0 32rpx;
			.item {
				padding: 30rpx 0;
				border-bottom: 1rpx solid #F6F6F6;
				.tops {
					display: flex;
					align-items: center;
					justify-content: space-between;
					.btns {
						display: flex;
						align-items: center;
						>view {
							display: flex;
							align-items: center;
							justify-content: center;
						}
						.xufei {
							width: 120rpx;
							height: 64rpx;
							border-radius: 40rpx 40rpx 40rpx 40rpx;
							border: 2rpx solid #D9D9D9;
							font-family: Alibaba PuHuiTi, Alibaba PuHuiTi;
							font-weight: 400;
							font-size: 28rpx;
							color: #0F1417;
							line-height: 40rpx;
							margin-right: 16rpx;
						}
						.shengji {
							font-family: Alibaba PuHuiTi, Alibaba PuHuiTi;
							font-weight: 400;
							font-size: 28rpx;
							color: #FA4A53;
							line-height: 40rpx;
							width: 120rpx;
							height: 64rpx;
							background: #FFFFFF;
							border-radius: 72rpx 72rpx 72rpx 72rpx;
							border: 2rpx solid #FA4A53;
						}
						.kaitong {
							font-family: Alibaba PuHuiTi, Alibaba PuHuiTi;
							font-weight: 400;
							font-size: 28rpx;
							color: #FFFFFF;
							line-height: 40rpx;
							width: 120rpx;
							height: 64rpx;
							background: #FA4A53;
							border-radius: 72rpx 72rpx 72rpx 72rpx;
							border: 2rpx solid #FA4A53;
						}
					}
					.left {
						flex: 1;
						display: flex;
						justify-content: space-between;
						.leftBox {
							display: flex;
							align-items: center;
						}
						.photo {
							margin-right: 20rpx;
							position: relative;
							image {
								display: block;
								width: 120rpx;
								height: 120rpx;
								border-radius: 50%;
							}
							.sex {
								position: absolute;
								width: 32rpx;
								height: 32rpx;
								// background: #FA4A53;
								border-radius: 50%;
								border: 2rpx solid #F7F8FA;
								bottom: 0;
								right: 0;
								image {
									display: block;
									width: 28rpx;
									height: 28rpx;
								}
							}
						}
						.names {
							flex: 1;
							.name {
								display: flex;
								align-items: center;
								// justify-content: space-between;
								padding-top: 18rpx;
								.fullname {
									font-family: Alibaba PuHuiTi, Alibaba PuHuiTi;
									font-weight: 500;
									font-size: 28rpx;
									color: #0F1417;
									line-height: 33rpx;
								}
								.tags {
									font-family: Alibaba PuHuiTi, Alibaba PuHuiTi;
									font-weight: 400;
									font-size: 20rpx;
									margin-left: 8rpx;
									line-height: 20rpx;
									padding: 4rpx 10rpx;
									border-radius: 14rpx 14rpx 14rpx 14rpx;
									color: #0F1417;
									background: #EDEFF0;
									&.base {
										color: #E7EDF4 !important;
										background: #252E3C !important;
									}
									&.golden {
										color: #FFE1CF !important;
										background: #A06D08 !important;
									}
									&.bojin {
										color: #FFE1CF !important;
										background: #4B1C00 !important;
									}
									&.zuanshi {
										color: #D0EAF9 !important;
										background: #3E5980 !important;
									}
								}
							}
							.code {
								margin-top: 16rpx;
								// color: rgba(15, 20, 23, 0.6);
								display: flex;
								align-items: center;
								line-height: 1;
								font-family: Alibaba PuHuiTi, Alibaba PuHuiTi;
								font-weight: 400;
								font-size: 24rpx;
								color: rgba(15, 20, 23, 0.7);
								line-height: 28rpx;
							}
						}
					}

				}
			}
		}
		.selectOptions {
			margin-bottom: 8rpx;
			.same {

				display: flex;
				flex-wrap: wrap;

				.item {
					margin-bottom: 16rpx;
					padding: 8rpx 20rpx;
					font-family: Alibaba PuHuiTi, Alibaba PuHuiTi;
					font-weight: 400;
					font-size: 24rpx;
					color: #0F1417;
					line-height: 36rpx;
					margin-right: 24rpx;
					background: #F6F7F9;
					border-radius: 104rpx 104rpx 104rpx 104rpx;

					&.active {
						background: #FA4A53;
						color: #FFFFFF;
					}
				}
			}
		}

		.searchBox {
			margin-bottom: 24rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;

			.Scan-code {
				width: 48rpx;
				height: 48rpx;
				margin-left: 20rpx;
			}
		}

		.search {
			flex: 1;

			height: 64rpx;
			background: #FFFFFF;
			border-radius: 152rpx 152rpx 152rpx 152rpx;
			border: 2rpx solid #FA4A53;
			display: flex;
			align-items: center;
			justify-content: space-between;

			.inp {
				flex: 1;
			}

			.btns {
				display: flex;
				align-items: center;
				justify-content: center;
				font-family: Alibaba PuHuiTi, Alibaba PuHuiTi;
				font-weight: 400;
				font-size: 24rpx;
				color: #FFFFFF;
				line-height: 40rpx;
				margin: 4rpx;
				width: 128rpx;
				height: 56rpx;
				background: #FA4A53;
				border-radius: 152rpx 152rpx 152rpx 152rpx;
			}
		}

	}
</style>
